<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>天气</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/all_css.css" />
		<link rel="stylesheet" type="text/css" href="css/weui/base.css" />
		<link rel="stylesheet" type="text/css" href="lib/weui.css" />
		<link rel="stylesheet" type="text/css" href="css/weui/jquery-weui.css" />
		<link rel="stylesheet" type="text/css" href="iconfont/iconfont.css" />
		<style type="text/css">
			#weather_main {
				max-width: 640px;
				min-width: 320px;
				margin: 0px auto;
				background-image: url(img/weather/w_freeway/bg_weather.jpg);
				background-size: 100% 100%;
				background-repeat: no-repeat;
				overflow: hidden;
			}
			
			.weather_head {
				height: 70px;
				padding: 25px 20px;
				max-width: 640px;
				min-width: 320px;
				width: 100%;
				margin: 0px auto;
				position: fixed;
				top: 0px;
			}
			
			.app_head_left {
				float: left;
				width: 30%;
				padding-top: 6px;
				padding-left: 6px;
			}
			
			.app_head_left a {
				color: #FFFFFF;
				font-size: 1.5em;
				font-weight: bold;
			}
			
			.app_head_mid {
				float: left;
				width: 37%;
				padding-top: 5px;
			}
			
			.app_head_right {
				float: right;
				width: 33%;
				text-align: right;
				padding: 6px 0px;
				margin-right: -10px;
			}
			
			.app_head_right a {
				color: #FFFFFF;
				font-size: 1.1em;
				font-weight: bold;
				font-family: "黑体";
			}
			
			.right_btn {
				font-size: 1.5em !important;
			}
			
			.tiaozhuanFree {
				position: relative;
				top: -2px;
			}
			
			#app_head_title {
				text-align: center;
				color: #FFFFFF;
				font-size: 1.6em;
				font-family: "宋体";
				font-weight: 900;
				margin-left: -12px;
			}
			/*----导航栏选中的项目背景色为白色----*/
			
			.weui_bar_item_on {
				background-color: #0070B4 !important;
				color: #FFFFFF !important;
			}
			
			.weui_navbar_item {
				color: #FFFFFF;
				background-color: #CCCCCC;
				height: 55px;
			}
			
			.weui_navbar b {
				font-size: 1em;
			}
			
			#cityW img {
				width: 100%;
			}
			
			.weather_mid {
				height: 300px;
				padding: 0px 20px;
				color: #FFFFFF;
				padding-top: 70px;
			}
			
			#weather_mid_title_left select {
				background-color: transparent;
				border: none;
				color: #FFFFFF;
			}
			
			#weather_mid_title_left img {
				width: 3em;
				/*vertical-align: middle;*/
			}
			
			#weather_mid_title_left select option {
				background-color: #0070B4;
				color: #FFFFFF;
			}
			
			#JLcitySelect {
				color: #FFFFFF;
				font-size: 1.3em;
				position: relative;
				top: -13px;
				left: 5px;
			}
			
			#weather_mid_title_left {
				float: left;
				width: 60%;
			}
			
			#weather_mid_title_right {
				width: 40%;
				float: left;
			}
			
			#weather_mid_title_right span {
				font-size: 1.5em;
			}
			
			.bigNum_T {
				font-size: 3.5em !important;
			}
			
			.sheshidu {
				position: relative;
				top: -18px;
				right: 12px;
			}
			
			#JLcitySelect+P {
				font-size: 1.1em;
			}
			/*----指数----*/
			
			.weather_mid_index h2 {
				font-size: 1.1em;
			}
			
			.weather_mid_index ul {
				width: 100%;
				margin-top: 5px;
			}
			
			.weather_mid_index ul li {
				float: left;
				width: 50%;
				height: 40px;
				padding: 5px 0px;
				border-top: 1px solid;
				font-size: 0.85em;
			}
			
			.weather_mid_index ul li:nth-child(2n) {
				border-left: 1px solid;
			}
			
			.weather_mid_index ul li:nth-child(2n) img {
				margin-left: 10px;
			}
			
			.weather_mid_index ul li img {
				width: 30px;
				vertical-align: middle;
				margin-right: 3px;
			}
			
			.weather_mid_forecast ul li {
				margin-top: 8px;
				font-size: 0.9em;
				float: left;
				text-align: center;
				border: 1px solid;
				border-left: none;
				height: 160px;
			}
			
			.weather_mid_forecast ul li img {
				width: 70%;
				height: 28px;
				margin-top: 10px;
			}
			
			h2 {
				font-weight: bold;
			}
			
			.week_date {
				position: relative;
				top: 5px;
			}
			
			/*----指数的值----*/
			
			.w_indexVal {
				float: right;
				font-size: 1.1em;
				margin-right: 7px;
				line-height: 25px;
			}
			
			.weather_mid_forecast ul li:last-child {
				border-right: none;
			}
			/*----底部弹出框修改样式----*/
			
			.picker-button {
				color: #0070B4 !important;
			}
			
			.weui_cell p {
				color: #0070B4;
				font-size: 1.2em;
				font-weight: bold;
				font-family: "黑体";
			}
			
			.tempMax, .tempMin{
				display: block;
				font-size: 1.2em;
				font-weight: bolder;
			}
			.tempMin{
				margin-top: -20px;
			}
		</style>
	</head>

	<body ontouchstart>
		<div id="weather_main">
			<div class="weather_head">
				<div class="app_head_left">
					<a href="index01.html" class="iconfont">&#xe6d4;</a>
				</div>
				<div class="app_head_mid">
					<p id="app_head_title">实时天气</p>
				</div>
				<div class="app_head_right">
					<a class="tiaozhuanFree" href="freeway_weather.html">高速天气</a>
					<a class="iconfont right_btn" href="freeway_weather.html">&#xe6d7;</a>
				</div>
			</div>
			<div class="weather_mid">
				<div class="weather_mid_title">
					<div id="weather_mid_title_left">
						<!--此处DOM添加节点-->

						<a href="javascript:;" class="iconfont" id="JLcitySelect">长春 &#xe6d5;</a>
					</div>
					<div id="weather_mid_title_right" class="tr">

					</div>
				</div>
				<div class="weather_mid_index">
					<!--指数 此处DOM添加至html-->
				</div>
				<div class="weather_mid_forecast">
					<!--未来一周 此处DOM添加至html-->
				</div>
			</div>
		</div>

	</body>
	<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/md5.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/weui/jquery-weui.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/back_end.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(function() {
			var allHeight = document.documentElement.clientHeight;
			$("#weather_main").css("height", allHeight);
			var Height1 = allHeight * 0.17;
			var Height2 = allHeight * 0.28;
			$(".weather_mid_title").css("height", Height1);
			$(".weather_mid_index").css("height", Height2);
			$(".weather_mid_forecast").css("height", Height1);
		});
		var cityName = "长春";
		$("#JLcitySelect").select({
			title: "请选择市、州",
			items: [{
					title: "长春",
					value: "长春",
				},
				{
					title: "吉林",
					value: "吉林",
				},
				{
					title: "四平",
					value: "四平",
				},
				{
					title: "辽源",
					value: "辽源",
				},
				{
					title: "通化",
					value: "通化",
				},
				{
					title: "白山",
					value: "白山",
				},
				{
					title: "松原",
					value: "松原",
				},
				{
					title: "白城",
					value: "白城",
				},
				{
					title: "延边",
					value: "延吉"
				}
			],
			onChange: function(d) {
				console.log(d.values);
				$("#JLcitySelect").html(d.titles + " &#xe6d5;");
				cityName = d.values;
				$("#weather_mid_title_left").children().not("#JLcitySelect").html("");
				$("#iconImg").remove();
				getTemp();
			}
		});
		//天气图标转换方法
		function picStr(icon) {
			if(icon == "晴") {
				return "img/weather/tianqi3/w_qing.png";
			} else if(icon == "阴") {
				return "img/weather/tianqi1/yin.png";
			} else if(icon == "多云") {
				return "img/weather/tianqi/w_yin.png";
			} else if(icon == "小雨" || icon == "阵雨") {
				return "img/weather/xiaoyu.png";
			} else if(icon == "中雨") {
				return "img/weather/tianqi3/zhongyu.png";
			} else if(icon == "大雨") {
				return "img/weather/tianqi3/dayu.png";
			} else if(icon == "暴雨") {
				return "img/weather/tianqi3/baoyu.png";
			} else if(icon == "霾") {
				return "img/weather/tianqi3/wumai.png";
			} else if(icon == "雷阵雨") {
				return "img/weather/tianqi/w_leizhenyu.png";
			} else {
				return "img/weather/tianqi/w_yin.png";
			}
		}

		function getTemp() {
			$("#weather_mid_title_right").html("");
			$(".weather_mid_index").html("");
			$(".weather_mid_forecast").html("");
			$.ajax({
				type: "post",
				url: Url + "?type=weather_info&cityname=" + cityName,
				async: false,
				cache: false,
				dataType: "jsonp", //数据类型为jsonp
				jsonp: "callbackparam", //服务端用于接收callback调用的function名的参数  
				jsonpCallback: "jsonpCallback1",
				success: function(data) {
					//					console.log(data);
					if(data.CODE == 1) {
						var d = data.DATA;
						var m = data.MDATA;
						if(isEncrypt(d, m)) {
							var d = JSON.parse(d);
							var arr = d.result;
							var Icon = arr.realtime.weather.info;
							//					console.log(Icon);
							var zwx = arr.life.info.ziwaixian[0];
							var year = arr.life.date.split("-")[0];
							var month = arr.life.date.split("-")[1];
							var day = arr.life.date.split("-")[2];
							var ymd = year + "年" + month + "月" + day + "日";
							var week = "星期";
							var w = new Date().getDay();
							switch(w) {
								case 0:
									week += "日";
									break;
								case 1:
									week += "一";
									break;
								case 2:
									week += "二";
									break;
								case 3:
									week += "三";
									break;
								case 4:
									week += "四";
									break;
								case 5:
									week += "五";
									break;
								case 6:
									week += "六";
									break;
							}
							//				console.log(week);
							var temp = arr.realtime.weather.temperature;
							//				console.log(temp);
							//指数6个
							var wind = arr.realtime.wind.direct + arr.realtime.wind.power;
							//				console.log(wind);
							var nongli = arr.realtime.moon;
							//				console.log(nongli);
							var carIndex = arr.life.info.xiche[0];
							//				console.log(carIndex);
							var coldIndex = arr.life.info.ganmao[0];
							//				console.log(coldIndex);
							var sportIndex = arr.life.info.yundong[0];
							//				console.log(sportIndex);
							var dressIndex = arr.life.info.chuanyi[0];
							//				console.log(dressIndex);
							//未来一周预报
							var ybDay = arr.weather[1].week;
							//				console.log(ybDay);
							//添加DOM节点至html 天气信息
							var icon = $('<img src="' + picStr(Icon) + '" id="iconImg"/>');
							$("#JLcitySelect").before(icon);
							var today = $('<p>' + ymd + "&nbsp;&nbsp;" + week + '</p>');
							$("#weather_mid_title_left").append(today);
							var span = $('<span class="mr15 bigNum_T">' + temp + '</span><span class="sheshidu">℃</span>');
							$("#weather_mid_title_right").append(span);
							//添加DOM节点至html 指数
							var title2 = $('<h2>指数</h2>');
							var ul = $('<ul></ul>');
							var li1 = $('<li><img src="img/weather/tianqi3/fengli.png" />风力<span class="w_indexVal">' + wind + '</span></li>');
							var li2 = $('<li><img src="img/weather/tianqi1/icon_calendar.png" />农历<span class="w_indexVal">' + nongli + '</span></li>');
							var li3 = $('<li><img src="img/weather/tianqi1/icon_car_wash.png" />洗车指数<span class="w_indexVal">' + carIndex + '</span></li>');
							var li4 = $('<li><img src="img/weather/tianqi1/icon_cold.png" />感冒指数<span class="w_indexVal">' + coldIndex + '</span></li>');
							var li5 = $('<li style="border-bottom: 1px solid;"><img src="img/weather/tianqi1/icon_sport.png" />运动指数<span class="w_indexVal">' + sportIndex + '</span></li>');
							var li6 = $('<li style="border-bottom: 1px solid;"><img src="img/weather/tianqi1/icon_dressing.png" />穿衣指数<span class="w_indexVal">' + dressIndex + '</span></li>');
							$(".weather_mid_index").append(title2, ul);
							$(ul).append(li1, li2, li3, li4, li5, li6);
							//添加DOM节点至html 未来一周预报
							var title3 = $('<h2>未 来 '+arr.weather.length+' 天</h2>');
							var yubaoUl = $('<ul></ul>');
							$(".weather_mid_forecast").append(title3, yubaoUl);
							for(var i = 0; i < arr.weather.length; i++) {
								var ybIcon = arr.weather[i].info.day[1];
								//					console.log(ybIcon);
								var yubaoLi = $('<li><span class="week_date">' + '周' + arr.weather[i].week + '<br />' + arr.weather[i].date.split('-')[1] + '/' + arr.weather[i].date.split('-')[2] + '</span><img src="' + picStr(ybIcon) + '"/><span class="week_temp"><span class="tempMax">' +
								arr.weather[i].info.day[2] + '℃</span><br/><span class="tempMin">' + arr.weather[i].info.night[2] + '℃</span></span></li>');
								yubaoLiWid = 100/arr.weather.length+"%";
								yubaoLi.css("width",yubaoLiWid);
								$(yubaoUl).append(yubaoLi);
							}
						} else {
							errMD();
						}
					} else {
						$.alert("暂无数据", "提示");
					}

				},
				error: function(data) {
					$.alert("连接超时，请稍后再试", "提示");
				}
			});
		}
		getTemp();
	</script>

</html>